<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.css">
		<link rel="stylesheet" href="../css/common.css">
		<style>
			body{background: #fff;}
			#page-box{}
			.mui-content{background:#fff;}
			.mange-list{font-size: 13px;}
			.mange-list .box .other{min-height: auto;}
			.mange-list .title,.mange-list .other,.mange-list p{padding:0 10px;}
			.mange-list .info{padding:5px 10px; position: relative;background: #eee;}
			.mange-list .info,.mange-list .box{border-bottom: 1px solid rgba(215, 215, 215, 1);}
			.mange-list .info span{margin-right: 15px;}
			.mange-list .info a{position: absolute;width:auto;height:100%;line-height: 31px;
			top:0;right:0;}
			.mange-list .other{color:#62625F;border-bottom: 1px dashed #ccc;padding-bottom: 10px;}
			.other span{display: block;float: left;}
			.mange-list p{color: #6F706C;padding:.8em 10px;font-size: 12px;margin-bottom: 0;}
			.mange-list .title{font-weight: 700;width:100%;font-size:13px;padding: 8px 10px;margin-top:10px;
			align-items: center;display:flex;line-height: 16px;}.mange-list .title span{display: block;width: 99%;}
			.info a{width:20%; text-align: center;}
			.info span:nth-child(1){color: #009F4E;}
			.info span:nth-child(2){color: #C50011;}
			.info span:nth-child(3){color: #4E4E4E;}
			.other span:nth-child(1){width:60%}
			.other span:nth-child(2){width:40%;text-align: right;}
			.other span:nth-child(3){clear: both;float: none;}
			.mange-list .title::after{content: '\e583';float: right;opacity: .4;
			font-size: 18px;font-weight: 100;color:#6D6D6D}
			.mange-list-active{background:#DCDCDC;}
			.new-list{width: 94%;margin:3%;border:1px solid #ccc;}
			.new-list .info{border-bottom: 0;background: none;}
			.new-list .info a span{padding:3px 5px;background-color: #275EB1;color: #fff;border-radius: 2px;}
			.new-list .info span:nth-child(1),.new-list .info span:nth-child(2){color: #275EB1;}
			.search-css,.search-css *{font-size: 14px;}.mui-input-row label{line-height: inherit;}
		</style>
		<title>外来人员管理</title>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">外来人员管理</h1>
		</header>
		<!--
		<div style="height:3vh;width:100%;"></div>
		-->
		
		<div class="mui-content" id="page" style="visibility: hidden;" v-cloak>
			<div class="mui-row mange-list">
				<div class="info"><span>总计入场：{{initData.approachCount}}人</span>    
				<span>总计离场：{{initData.departureCount}}人</span>    
				<span>共累计：{{initData.total}}人</span></div>
			</div>
			
			<ul class="mui-table-view search-css" style="margin-top:0"> 
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="javascript:;">搜索</a>
					<div class="mui-collapse-content">
						<form class="mui-input-group">
							<div class="mui-input-row" v-if="depthSearch">
								<label>区域</label>
								<i class="mui-icon mui-icon-arrowright" style="width: 5%;padding:12px 0;float: right;"></i>
								<input type="text" style="width: 60%;" v-model="tempText1" readonly="readonly"
								 class="" @click="selectArea" placeholder="请选择区域">
							</div>
							<div class="mui-input-row" v-if="depthSearch">
								<label>场站</label>
								<i class="mui-icon mui-icon-arrowright" style="width: 5%;padding:12px 0;float: right;"></i>
								<input type="text" style="width: 60%;" v-model="tempText2" readonly="readonly"
								 @click="selectStation" class="" placeholder="请选择场站">
								 
							</div>
							<div class="mui-input-row projectNameClear">
								<label>项目名称</label>
								<input type="text" class="mui-input-clear" v-model="listQuery.projectName" placeholder="请填写项目名称关键字">
							</div>
							<div class="mui-button-row" style="text-align: right;">
								<button type="button" class="mui-btn mui-btn-primary" @click="searchlist">查询</button>
								<button v-if="depthSearch" type="button" class="mui-btn mui-btn-danger" @click="clearQuery">重置</button>
								<span>&nbsp;</span>
							</div>
						</form>
					</div>
				</li>
			</ul>
			
			<div class="mui-row mange-list new-list" v-for="(ie,ic) in list" :key="'a_'+ic" 
			@click="click($event,ie.id)">
				<div class="box">
					<div class="mui-icon title">
						<span v-if="(ie.enterpriseName && !ie.enterpriseName.trim()) || ie.hasUnit=='0'">无单位项目</span>
						<span v-else>承包商：{{ie.enterpriseName}}</span>
						</div>
					<div class="other"><span>作业项目：{{ie.projectName}}</span><span>入场：{{ie.approachTime?ie.approachTime:'未入场'}}</span><span></span></div>
					<p style="overflow: hidden;">事由：{{ie.content}}</p>
				</div>
				<div class="info"><span>入场：{{ie.approachCount}}人</span>    <span>离场：{{ie.departureCount?ie.departureCount:0}}人</span>    
				<span>累计：{{ie.total}}人</span><a href="javascript:;" @click.stop="appUserAllLeave(ie.id,ie)" v-if="ie.approachTime && !ie.departureTime && ie.total>0"><span style="color: #fff;">全部离场</span></a></div>
			</div>
			
		</div>
		<div class="mui-row" id="loadingTxt"></div>
		
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.css" />
	<script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../../../js/vue.js"></script>
	<script src="../js/mkeyplus.base.js"></script>
	<script src="../formal/js/api.js"></script>
	<script>
		var htapi = new HTGlobal();
		var _mui = undefined;
		var loadingTxt = mui('#loadingTxt');
		htapi.apiKey = 'group';
		mui.init({
			pullRefresh : {
				container:'#loadingTxt',
				down: {
					style: 'circle',
					height: 50, //可选,默认50.触发下拉刷新拖动距离,
					auto: false, //可选,默认false.首次加载自动下拉刷新一次
					contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
					callback: function() {
						var query = JSON.stringify(page.listQuery);
						query = JSON.parse(query);
						query.pageIndex = 1;
						page.getList(query,function(data){
							var _list = page.list.map(function(item){
								return item.id
							});
							var newlist = data.data?data.data.list:[];
							newlist.map(function(item,index){
								if(_list.indexOf(item.id)<0){
									page.list.splice(index,0,item);
								}
							});
							//console.log(JSON.stringify(newlist));
						});
						loadingTxt.pullRefresh().endPulldownToRefresh();
					}
				},
				up:{
					height:50,
					auto: true,
					//contentdown:'',
					contentnomore: '没有更多数据了',
					contentrefresh: "正在加载...",
					callback:function(){
						page.listQuery.pageIndex++
						_mui = this;
						page.pload()
					}
				}
			}
		});
		mui.plusReady(function(){
			htapi.fetch({},function(data){
				if(data.code == '0')
				page.initData = data.data;
				
			},false,'workUserCount','post')
			
			mui('.projectNameClear').on('tap','.mui-input-clear',function(){
				page.listQuery.projectName = ''
			})
			
			page.getModOrgs()
		})
		var page = new Vue({
			el:'#page',
			data:{
				listQuery:{
					pageIndex:0,
					projectName:''
				},
				initData:{
					total:0,
					departureCount:0,
					approachCount:0
				},
				list:[],
				stationList:[],
				treeList:[],
				pickerArea:undefined,
				pickerStation:undefined,
				
				tempText1:'',
				tempText2:'',
				groupUserInfo:{internalType:0}
			},
			computed:{
				depthSearch(){
					return this.groupUserInfo.internalType > 2
				}
			},
			methods:{
				pload(){
					var _t = this;
					_t.groupUserInfo = JSON.parse(localStorage.getItem('groupUser')) || {internalType:0};
					//console.log(localStorage.getItem('groupUser'));
					
					
					this.getList(this.listQuery,function(data){
						if(data.code=='0'){
							var list = data.data.list;console.log(JSON.stringify(list));
							page.list = page.list.concat(list);
							if(!list.length){ //如果没有数据了
								loadingTxt.pullRefresh().endPullup(true);
							}
							//console.log($('#loadingTxt').html())
						}else{
							if(data.code=='401'){
								mui.toast('登录信息过期，请重新登录！');
							}
						
						}
					})
				},
				getList(query,callback){
					htapi.fetch(query,function(data){
						_mui.endPullupToRefresh(false);
						callback(data);
					},false,'getProjectByUser')
				},
				click(e,enterpriseProjectId){
					var p = $(e.target).parents('.mange-list');
					if(!p) p = $(e.target);
					p.addClass('mange-list-active')
					setTimeout(function(){
						p.removeClass('mange-list-active');
						mui.openWindow({
							url:'./personnel_registration.html',
							id:'./personnel_registration.html',
							extras:{
								enterpriseProjectId:enterpriseProjectId
							}
						})
					},200);
				},
				appUserAllLeave(eId,row){
					mui.confirm('确定要离场吗', '提示', ['确定','取消'], function(e) {
						if(e.index == 0) {
							htapi.fetch({enterpriseProjectId:eId},function(res){
								console.log(JSON.stringify(res));
								if(res.msg) mui.toast(res.msg);
								if(res.code == '0') row.departureTime = true;
							},false,'appUserAllLeave','post')			
						} else {}
					})
				},
				getModOrgs(){
					page.pickerArea = mui.PopPicker?new mui.PopPicker():{};
					page.pickerStation = mui.PopPicker?new mui.PopPicker():{};
					
					page.pickerArea.cancel.addEventListener('tap', function (event) {
						loadingTxt.pullRefresh().setStopped(false);
						loadingTxt.pullRefresh().enablePullupToRefresh();
					});
					page.pickerStation.cancel.addEventListener('tap', function (event) {
						loadingTxt.pullRefresh().setStopped(false);
						loadingTxt.pullRefresh().enablePullupToRefresh();
					});
					
					htapi.fetch({},function(data){
						if(data.code == '0'){
							if(data.data){
								var _t = page;
								_t.treeList = data.data;
								
								if(_t.groupUserInfo.areaId){
									_t.listQuery.areaId = _t.groupUserInfo.areaId;
									_t.tempText1 = _t.groupUserInfo.areaName;
									_t.hanldArea([{value:_t.listQuery.areaId,text:_t.tempText1}]);
								}
								if(_t.groupUserInfo.stationId){
									_t.listQuery.stationId = _t.groupUserInfo.stationId;
									_t.tempText2 = _t.groupUserInfo.stationName;
								}
								
								
								
							}
						}
					},false,'getModOrgs','post')
				},
				selectArea(){
					var _t = this;
					//if(_t.groupUserInfo.internalType<3)
					loadingTxt.pullRefresh().setStopped(true);
					loadingTxt.pullRefresh().disablePullupToRefresh();
					var list = page.treeList.map(function(item,index){
						return {value:item.areaId,text:item.areaName}
					})
					page.pickerArea.setData(list);
					page.pickerArea.show(function(selectItems){console.log(JSON.stringify(selectItems))
						page.hanldArea(selectItems)
					})
				},
				selectStation(){
					var _t = this;
					loadingTxt.pullRefresh().setStopped(true);
					loadingTxt.pullRefresh().disablePullupToRefresh();
					page.pickerStation.setData(page.stationList);
					page.pickerStation.show(function(selectItems){console.log(JSON.stringify(selectItems))
						page.hanldStation(selectItems)
					});
				},
				clearQuery(){
					page.listQuery = {projectName:''};
					page.tempText1 = page.tempText2 = '';
					page.stationList = [];
					page.searchlist();
				},
				searchlist(){
					page.list = [];
					page.listQuery.pageIndex = 0;
					
					var userdata = JSON.parse(localStorage.getItem('groupUser'));
					userdata.areaId = page.listQuery.areaId;
					userdata.areaName = page.tempText1;
					userdata.stationName = page.tempText2;
					userdata.stationId = page.listQuery.stationId;
					localStorage.setItem('groupUser',JSON.stringify(userdata))
					loadingTxt.pullRefresh().refresh(true);
					loadingTxt.pullRefresh().pullupLoading();
				},
				hanldArea(selectItems){
					var list = page.treeList.filter(function(item,index){
						return item.areaId == selectItems[0].value;
					});
					if(list[0]){
						page.stationList = list[0].stationList.map(function(item,index){
							return {value:item.stationId,text:item.stationName};
						});
					}
					page.tempText1 = selectItems[0].text;
					page.listQuery.areaId = selectItems[0].value;
					loadingTxt.pullRefresh().setStopped(false);
					loadingTxt.pullRefresh().enablePullupToRefresh();
					page.tempText2 = '';
					page.listQuery.stationId = '';
				},
				hanldStation(selectItems){
					page.tempText2 = selectItems[0].text;
					page.listQuery.stationId = selectItems[0].value;
					loadingTxt.pullRefresh().setStopped(false);
					loadingTxt.pullRefresh().enablePullupToRefresh();
				}
			},
			created(){
				$('#page').css('visibility','inherit');
			}
		});		
	</script>
	</body>
</html>
